<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成本价检查工具</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>成本价检查工具</h1>
        <div class="nav-links">
            <a href="index.html">返回销售页面</a>
        </div>

        <div class="statistics-filters">
            <button id="refresh-btn" class="btn">刷新数据</button>
            <button id="clear-btn" class="btn" style="margin-left: 10px;">清除成本价数据</button>
        </div>

        <div class="statistics-content">
            <div class="summary-cards">
                <div class="card">
                    <h3>成本价数据总数</h3>
                    <p id="cost-price-count" class="amount">0</p>
                </div>
            </div>

            <div class="sales-table-container">
                <h2>成本价列表</h2>
                <table class="sales-table">
                    <thead>
                        <tr>
                            <th>商品名称</th>
                            <th>成本价</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="cost-prices-body">
                        <!-- 成本价数据将通过JavaScript动态添加 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        // 加载并显示成本价数据
        function loadAndDisplayCostPrices() {
            console.log('=== 加载成本价数据开始 ===');

            // 从localStorage读取成本价数据
            const storedCostPrices = localStorage.getItem('productCostPrices');
            console.log('localStorage中是否存在成本价数据:', storedCostPrices !== null);

            const costPricesBody = document.getElementById('cost-prices-body');
            const costPriceCountEl = document.getElementById('cost-price-count');

            // 清空表格
            costPricesBody.innerHTML = '';

            if (storedCostPrices) {
                const parsedCostPrices = JSON.parse(storedCostPrices);
                const costPriceCount = Object.keys(parsedCostPrices).length;

                console.log('解析后的成本价数据:', parsedCostPrices);
                console.log('成本价数据数量:', costPriceCount);

                // 更新计数显示
                costPriceCountEl.textContent = costPriceCount;

                // 显示所有成本价数据
                for (const [productName, costPrice] of Object.entries(parsedCostPrices)) {
                    console.log(`${productName}: ${costPrice}`);

                    const row = document.createElement('tr');
                    // 为排骨添加高亮
                    if (productName === '排骨') {
                        row.classList.add('highlight');
                    }
                    row.innerHTML = `
                        <td>${productName}</td>
                        <td>${costPrice}</td>
                        <td>
                            <input type="number" class="cost-price-input" value="${costPrice}" min="0" step="0.01">
                            <button class="btn update-btn" data-product="${productName}">更新</button>
                        </td>
                    `;
                    costPricesBody.appendChild(row);
                }

                // 添加更新按钮事件监听
                document.querySelectorAll('.update-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const productName = this.getAttribute('data-product');
                        const input = this.parentNode.querySelector('.cost-price-input');
                        const newCostPrice = parseFloat(input.value);

                        if (!isNaN(newCostPrice) && newCostPrice >= 0) {
                            updateCostPrice(productName, newCostPrice);
                        } else {
                            alert('请输入有效的成本价');
                        }
                    });
                });
            } else {
                // 没有找到成本价数据
                costPriceCountEl.textContent = '0';
                const emptyRow = document.createElement('tr');
                emptyRow.innerHTML = '<td colspan="3" style="text-align: center;">没有找到成本价数据</td>';
                costPricesBody.appendChild(emptyRow);
            }

            console.log('=== 加载成本价数据结束 ===');
        }

        // 更新商品成本价
        function updateCostPrice(productName, newCostPrice) {
            // 从localStorage读取成本价数据
            let productCostPrices = JSON.parse(localStorage.getItem('productCostPrices')) || {};

            // 更新成本价
            productCostPrices[productName] = newCostPrice;

            // 保存到localStorage
            localStorage.setItem('productCostPrices', JSON.stringify(productCostPrices));

            // 同时更新productData
            let productData = JSON.parse(localStorage.getItem('productData')) || [];
            productData.forEach(product => {
                if (product.name === productName) {
                    product.costPrice = newCostPrice;
                }
            });
            localStorage.setItem('productData', JSON.stringify(productData));

            alert(`成功更新 ${productName} 的成本价为 ${newCostPrice}`);
            console.log(`更新 ${productName} 的成本价为 ${newCostPrice}`);

            // 重新加载数据
            loadAndDisplayCostPrices();
        }

        // 清除所有成本价数据
        function clearCostPrices() {
            if (confirm('确定要清除所有成本价数据吗？')) {
                localStorage.removeItem('productCostPrices');
                
                // 同时更新productData
                let productData = JSON.parse(localStorage.getItem('productData')) || [];
                productData.forEach(product => {
                    product.costPrice = undefined;
                });
                localStorage.setItem('productData', JSON.stringify(productData));

                alert('已清除所有成本价数据');
                console.log('已清除所有成本价数据');

                // 重新加载数据
                loadAndDisplayCostPrices();
            }
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 加载成本价数据
            loadAndDisplayCostPrices();

            // 为刷新按钮添加点击事件
            document.getElementById('refresh-btn').addEventListener('click', loadAndDisplayCostPrices);

            // 为清除按钮添加点击事件
            document.getElementById('clear-btn').addEventListener('click', clearCostPrices);
        });
    </script>
</body>
</html>